<template>
  <a href="javascript:void(0)" class="image-file" ref="avatar">
    <input type="file" accept="image/png, image/jpeg, image/jpg" @change="preview" title>
  </a>
</template>

<script>
import ImageUtils from "src/libs/image.js";

export default {
  name: "image-input",
  props: {
    compress: {
      type: Boolean,
      default: true
    },
    change: {
      type: Function,
      default: () => {}
    }
    // data: {
    //   type: Buffer,
    //   default: undefined
    // }
  },
  data() {
    return {
      file: "",
      image: "",
      format: ""
    };
  },
  methods: {
    preview(e) {
      let file = e.target.files[0];
      this.file = file;
      if (this.compress) {
        ImageUtils.compress(
          file,
          {
            compress: {
              width: 480,
              height: 480,
              quality: 0.8
            },
            type: "file"
          },
          (res, w, h) => {
            if (res) {
              let reader = new FileReader();
              reader.onload = () => {
                this.$refs["avatar"].style.backgroundImage =
                  "url('" + reader.result + "')";
                let splits = reader.result.split(",");
                this.format = splits[0]; //data:image/png;base64, data:image/jpeg;base64,
                this.image = splits[1];
                reader.onload = null;
              };
              reader.readAsDataURL(res);

              // // 更新头像
              // if (this.edit_flag) {
              //     let data = new FormData();
              //     data.append('avatar', res);
              //     data.append('user_id', this.user_id);
              //     updateAvatar(data).then(res => {
              //         this.$Message.success("头像更新成功!");
              //     })
              // }
            } else {
              this.$Message.error("图片过大，请更换");
            }
          }
        );
      } else {
        let reader = new FileReader();
        reader.onload = () => {
          this.$refs["avatar"].style.backgroundImage =
            "url('" + reader.result + "')";
          let splits = reader.result.split(",");
          this.format = splits[0]; //data:image/png;base64, data:image/jpeg;base64,
          this.image = splits[1];
          reader.onload = null;
        };
        reader.readAsDataURL(this.file);
      }
    },
    getImage() {
      return this.image;
    },
    getFormat() {
      return this.format;
    },
    getFile() {
      return this.file;
    },
    /**
     * type buffer
     */
    resetImage(format, data) {
      if (format && data) {
        this.image = "";
        let result = [format, data].join(",");
        this.$refs["avatar"].style.backgroundImage = "url('" + result + "')";
      } else {
        this.$refs["avatar"].style.backgroundImage = "";
        //this.$refs["avatar"].style.background = url("../../images/upload.png");
        //  "url('../../images/upload.png')";
      }
    }
  },
  watch: {
    image(val) {
      this.change(val);
      this.$emit("changedImage");
    }
  }
};
</script>

<style scoped lang="less">
.image-file {
  position: relative;
  display: inline-block;
  background: url("../../images/upload.png");
  background-size: 110px 110px;
  border: 1px solid #cfcfcf;
  border-radius: 5%;
  padding: 4px 12px;
  width: 110px;
  height: 110px;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
  input {
    position: absolute;
    font-size: 100px;
    width: 110px;
    height: 110px;
    right: 0;
    top: 0;
    opacity: 0;
  }
  :hover {
    background: #aadffd;
    border-color: #78c3f3;
    color: #004974;
    text-decoration: none;
  }
}
</style>